<template>
    <div id="app">
        <div id="main"></div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    export default {
        name: 'app',
        data () {
            return {
                chart: null,
                opinion: [],
                opinionData: [

                ]
            }
        },
        created() {
            const _this = this
            axios.get("http://localhost:8181/report/findAll").then(function (resp) {
                var results = resp.data
                for (var i = 0; i < results.length; i++) {
                    _this.opinion.push(results[i].cms_id)
                    _this.opinionData.push({
                        value: results[i].times,
                        name: results[i].cms_id
                    })
                }
            })
        },
        methods: {
            handleSelect (key) {
                // this.$router.push({ path: key })
            },
            drawPie (id) {
                console.log(this.opinion)
                this.chart = echarts.init(document.getElementById(id))
                this.chart.setOption({
                    title: {
                        text: '寝室学习氛围情况调查',
                        left: 'center',
                        top: 10,
                        textStyle: {
                            fontSize: 24,
                            fontFamily: 'Helvetica',
                            fontWeight: 400
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatte: '{b}: {c} ({d}%)'
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {},
                            dataView: {}
                        },
                        right: 15,
                        top: 10
                    },
                    legend: {
                        orient: 'vertical',
                        left: 5,
                        top: 10,
                        data: this.opinion
                    },
                    series: [
                        {
                            name: '寝室学习氛围',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            center: ['50%', '60%'],
                            avoidLabelOverlap: false,
                            label: {
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '24',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: this.opinionData,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffset: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
            }
        },
        mounted () {
            this.$nextTick(function () {
                this.drawPie('main')
            })
        }
    }
</script>

<style scoped>
    #main {
        position: relative;
        left: 50%;
        margin-left: -400px;
        margin-bottom: 70px;
        width: 800px;
        height: 600px;
        border-radius: 10px;
    }
</style>